import { Box, IconButton, LinearProgress, Typography } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import "./uploadStyle.css"
import { setProgressOpen } from "../../app/features/progressSlice";
import { useDispatch } from "react-redux";

function LinearProgressWithLabel(props) {
    let prec = '初始化';
    if (props.value !== undefined && props.value !== null && !isNaN(props.value)) {
        prec = `${props.value}%`;
    }
     
    return (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <Box sx={{ width: '100%', mr: 1 }}>
          <LinearProgress {...props} />
        </Box>
        <Box sx={{ minWidth: '3rem' }}>
          <Typography variant="body2" color="text.secondary">{prec}</Typography>
        </Box>
      </Box>
    );
  }

function UploadItem(prosp) {
    const {item} = prosp;    
    let value = Math.floor(item.progress * 100);
    let progress = null;
    if (item.state === 0) {
        progress =  <LinearProgressWithLabel variant="indeterminate" />
    } else if (item.state === 1) {
        progress =  <LinearProgressWithLabel  variant="determinate" value={value}  />
    } else if (item.state === 2) {
        progress =  <LinearProgressWithLabel  variant="determinate" value={value}  />
    }
    return (
    <li className="upload-item">
        <Box sx={{flexGrow:1, maxWidth:'100%'}}>
            <Typography sx={{fontWeight: 600, whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{item.fileName}</Typography>
            {progress}
        </Box>
        
    </li>
    );
}

function UploadPanel(prosp) {
    const {uploadList} = prosp
    const dispatch = useDispatch();
    function handleCloseOnClick(e) {
        console.log(e);
        dispatch(setProgressOpen(false));
    }

    return (
        <Box sx={{padding:"0px 12px"}}>
            <Box sx={{display:"flex", justifyContent:'space-between'}}>
                <Box>
                    <h2>上传</h2>
                </Box>
                <Box sx={{display:"flex", alignItems:'center'}}>
                    <IconButton onClick={handleCloseOnClick}>
                        <CloseIcon/>
                    </IconButton>
                </Box>
            </Box>
            <ul className="upload-list">
                { uploadList.map((e) => <UploadItem key={e.id} item={e}/>) }
            </ul>
        </Box>
    )
}


export default UploadPanel;